<!--
 * @Author: your name
 * @Date: 2021-10-08 18:59:09
 * @LastEditTime: 2021-10-18 15:55:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \film-project\src\views\Home.vue
-->
<template>
  <div id="content">
    <h1>选影视</h1>
    <div id="article">
      <div class="tag">
        <ul class="category">
          <li><span class="tag-checked tag">全部形式</span></li>
          <li><span class="tag">电影</span></li>
          <li><span class="tag">电视剧</span></li>
          <li><span class="tag">综艺</span></li>
          <li><span class="tag">动漫</span></li>
          <li><span class="tag">纪录片</span></li>
          <li><span class="tag">短片</span></li>
        </ul>
        <ul class="category">
          <li><span class="tag-checked tag">全部特色</span></li>
          <li>
            <span
              class="tag"
              @click="getArticleCategory(item.id)"
              v-for="item in tagList"
              :key="item.id"
              >{{ item.name }}</span
            >
          </li>
          <li>
            <span class="tag new-tag"
              >+ 自定义标签 <input /><span>确认</span>
            </span>
          </li>
        </ul>
        <ul class="category">
          <li><span class="tag-checked tag">全部年代</span></li>
          <li><span class="tag">2021</span></li>
          <li><span class="tag">2020</span></li>
          <li><span class="tag">2019</span></li>
          <li><span class="tag">2010年代</span></li>
          <li><span class="tag">2000年代</span></li>
          <li><span class="tag">90年代</span></li>
          <li><span class="tag">80年代</span></li>
          <li><span class="tag">70年代</span></li>
          <li><span class="tag">60年代</span></li>
          <li><span class="tag">更早</span></li>
        </ul>
      </div>

      <div class="tag-bottom">
        <div>
          <el-radio-group v-model="radio1" size="medium" fill="#258dcd">
            <el-radio-button label="近期热门"></el-radio-button>
            <el-radio-button label="标记最多"></el-radio-button>
            <el-radio-button label="评分最高"></el-radio-button>
            <el-radio-button label="最新上映"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="tag-bottom-check">
          <el-checkbox-group v-model="checkList" fill="#258dcd">
            <el-checkbox label="可播放"></el-checkbox>
            <el-checkbox label="我没看过"></el-checkbox>
          </el-checkbox-group>
        </div>
        <el-popover placement="bottom" width="280" trigger="click">
          <div class="block">
            <el-slider
              v-model="value"
              range
              show-stops
              :max="10"
              :marks="marks"
            >
            </el-slider>
          </div>
          <el-button slot="reference" size="medium"
            >评分区间筛选<i class="el-icon-arrow-down"></i
          ></el-button>
        </el-popover>
      </div>
      <div class="articles">
        <div class="box">
          <div class="article" v-for="item in articleCategory" :key="item.id">
            <div class="pic" @click="clickArticle(item.id)">
              <img width="100%" height="100%" :src="item.cover" alt="" />
            </div>
            <div class="info" @click="clickArticle(item.id)">
              <div>{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="load">
      <a href="javascript:;" class="more">加载更多</a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#content {
  padding: 0em 250px;
  width: 980px;
  // height: 1500px;
}
#article {
  padding: 0em 0px;
  width: 740px;
  height: 1500px;
}

.category {
  padding-left: 0;
  margin-bottom: 17px;
}
.category .tag {
  display: inline-block;
  // color: #333;
  margin-right: 4px;
  padding-top: 3px;
}
ul {
  list-style: none;
  margin: 0;
  margin-bottom: 0px;
  padding: 0;
  padding-left: 0px;
}
.category li {
  display: inline-block;
  color: #333;
  margin-right: 4px;
  padding-top: 3px;
  margin: 0;
  padding: 0;
  height: 27px;
}
.category .tag {
  // zoom: 1;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 10px;
  line-height: 20px;
  border-radius: 2px;
}
.category span {
  display: inline-block;
}
.tag-checked {
  opacity: 0.8;
  background: #258dcd;
  color: #fff;
}

.tag-bottom {
  display: flex;
  justify-content: center;
}
.tag-bottom-check {
  padding-top: 8px;
  padding-inline: 10px;
}
//--------
.articles {
  width: 100%;
  overflow: hidden;
  position: relative;
  white-space: wrap;
  height: 1500px;
  .box {
    height: 250px;
    position: absolute;
    width: 800px;

    .article {
      width: 140px;
      height: 264px;
      float: left;
      overflow: hidden;
      cursor: pointer;
      padding: 1em;
      box-sizing: border-box;
      .pic {
        height: 160px;
        cursor: pointer;
      }
      .info {
        div {
          margin: 10px 0;
          line-height: 2em;
          cursor: pointer;
          color: black;
        }
      }
    }
  }
}
#load {
  width: 740px;
  height: 40px;
  background-color: rgb(229, 231, 233);
  text-align: center;
}
</style>

<script>
import { get } from "../utils/request";
export default {
  data() {
    return {
      radio1: "",
      checkList: [""],
      value: [2, 8],
      marks: {
        0: "0分",
        10: "10分",
        5: {
          style: {
            color: "#1989FA",
          },
          label: this.$createElement("strong", "5分"),
        },
      },

      // articleData: [],
      articleCategory: [],
      tagList: [],
    };
  },
  created() {
    // this.getArticleData();
    this.getArticleCategory();
    this.getTagList();
  },
  methods: {
    // getArticleData() {
    //   this.articleData = [];
    //   get("index/article/pageQuery", {
    //     page: 1,
    //     pageSize: 35,
    //   }).then((res) => {
    //     if (res && res.status == 200 && res.data && res.data.list) {
    //       this.articleData = res.data.list;
    //     }
    //   });
    // },

    getArticleCategory(id) {
      this.articleCategory = [];
      get("index/article/pageQuery", {
        page: 1,
        pageSize: 35,
        categoryId: id,
      }).then((res) => {
        if (res && res.status == 200 && res.data && res.data.list) {
          this.articleCategory = res.data.list;
        }
      });
      // this.$refs[`category${this.id}`].style.color = black;
    },
    getTagList() {
      this.tagList = [];
      get("index/category/findAll").then((res) => {
        if (res && res.status == 200 && res.data) {
          this.tagList = res.data;
        }
      });
    },
  },
};
</script>